<template>
	<view class="content">
		<view class="Main">
			<view class="HomeSearch">
				<u-search :show-action="false" shape="square" bg-color="#202226" v-model="keyword"></u-search>
			</view>
			<view class="HomeSwiper">
				<u-swiper indicatorActiveColor='#e7c897' indicatorInactiveColor='#b9b9b9' indicatorMode='dot'
					height="350rpx" indicator :list="swiper" @change="e => currentNum = e.current">
				</u-swiper>
			</view>
			<view class="DataList">
				<view class="Item" v-for="Item,Index in list" :key="Index">
					<view class="Left">
						<image :src="Item.image" class="LeftImg" mode=""></image>
					</view>
					<view class="Right">
						<view class="Title">
							{{Item.name}}
						</view>
						<view class="Time">
							活动时间: {{Item.riqi}}
						</view>
						<view class="Btn" @click="GoDetail(Item.id)">
							参加活动
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部导航栏 -->
		<jh-tabbar></jh-tabbar>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				//搜索框内容
				keyword: '',
				//页面数据
				list: [],
				//轮播图数据
				swiper: ['/static/lbb.png', '/static/lba.png'],
				//轮播图下标
				currentNum: 0
			}
		},
		onLoad() {
			this.GetList()
		},
		methods: {
			GetList() {
				this.$api.Pact({}, res => {
					this.list = res.data
				})
			},
			GoDetail(e) {
				uni.navigateTo({
					url: '/pages/hd/hd?id=' + e
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.u-swiper {
		background: transparent !important;
	}

	.Main {
		margin: 0 30rpx;

		.HomeSearch {
			margin-top: 104rpx;
		}

		.HomeSwiper {
			margin: 20rpx 0;
		}

		.DataList {
			.Item {
				margin-bottom: 20rpx;
				display: flex;
				border-radius: 20rpx;
				box-shadow: 0rpx 10rpx 40rpx rgba(0, 0, 0, 0.53);
				background: #202126;
				padding: 20rpx;

				.Left {
					margin-right: 10rpx;

					.LeftImg {
						width: 383rpx;
						height: 239rpx;
						border-radius: 20rpx;
					}
				}

				.Right {
					.Title {
						font-size: 28rpx;
						color: #FFFFFF;
						height: 86rpx;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						/* 设置最多显示两行 */
						-webkit-box-orient: vertical;
						overflow: hidden;
						text-overflow: ellipsis;
						line-height: 46rpx;
					}

					.Time {
						font-size: 20rpx;
						color: #B9B9B9;
						margin: 13rpx 0 24rpx;
					}

					.Btn {
						display: inline-block;
						margin-left: 25rpx;
						padding: 10rpx 55rpx;
						background: #e8c998;
						border-radius: 10rpx;
					}
				}
			}


		}
	}
</style>